<template>
	<up-sticky>
		<view class="page-frame" :style="{
			padding: `${top}px 24px 12px`,
		}">
			<view class="up-flex up-flex-between up-flex-items-center" :style="{
				width: `${width - 24}px`
			}">
				<view class="header-left">
					<up-image :src="icon" width="32px" height="32px"></up-image>
					<view>{{ title }}</view>
				</view>
				<view v-if="page == 'Home'" class="notification-btn">
					<text class="iconfont">&#xe614;</text>
				</view>
				<view v-if="page == 'Mine'" class="settings-btn">
					<text class="iconfont">&#xe643;</text>
				</view>
			</view>
		</view>
	</up-sticky>
</template>

<script setup>
	const top = uni.getMenuButtonBoundingClientRect().top
	const width = uni.getMenuButtonBoundingClientRect().left

	const prop = defineProps({
		page: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: ''
		},
		icon: {
			type: String,
			default: ''
		}
	})

	console.info(uni.getMenuButtonBoundingClientRect())
</script>

<style lang="scss" scoped>
	.page-frame {
		opacity: 0.95;
		background-color: #fff;
		position: relative;

		.header-left {
			display: flex;
			align-items: center;
			gap: 12px;
			color: #1f2937;
			font-size: 16px;
			font-weight: bold;
			cursor: pointer;
			transition: color 0.3s ease;
		}

		.notification-btn {
			margin-right: 16px;
			position: relative;

			.iconfont {
				font-size: 22px;
				font-weight: bold;
				color: #333;
			}
		}

		.settings-btn {
			margin-right: 16px;
			background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
			border: 1px solid rgba(148, 163, 184, 0.2);
			border-radius: 12px;
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #64748b;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

			.iconfont {
				font-size: 18px;
				font-weight: 500;
			}
		}

	}
</style>